iT邦幫忙

2026 iThome 鐵人賽

DAY 4
0
Vibe Coding

《腦中的點子真的做得出來嗎?30 天 AI Vibe Coding 實驗》系列 第 4

Day 4|把原型整理成專案,建立 Git 工作流程

  • 分享至 

  • xImage
  •  

前三天,我從「想用 AI 做點東西」開始,選定分錢工具,再逐步整理出多人代墊、分攤計算與現金找零的需求。今天先不增加功能,而是把注意力放在另一件事:讓目前的原型有清楚的檔案結構、版本紀錄,以及可以持續開發的起點。

今天的工作,是整理現有專案、連接 GitHub,並補上 README。對我來說,這也是從「讓 AI 幫我做出畫面」,往「理解並管理自己的專案」跨出的一步。

目前的分錢工具使用 HTML、CSS 和 JavaScript。網頁結構放在 index.html,介面樣式放在 style.css,操作流程與畫面更新由 app.js 處理,分攤與結算計算則放在 logic.js。先認識這些檔案的用途,之後修改功能時,才比較知道自己正在改哪個部分。

在連接 GitHub 之前,我先到專案資料夾的終端機執行 git status,查看目前的版本狀態。畫面顯示「On branch main」以及「nothing to commit, working tree clean」,代表目前位於 main 分支,而且沒有尚未提交的修改。

接著,我用 git log --oneline -5 查看最近的版本紀錄,發現專案原本就已經有兩筆提交。一筆是建立最初的 AA 分錢工具,另一筆則加入共同帳本、自訂分攤與新版介面。這也讓我知道,現有原型已經有 Git 歷史,不需要重新初始化,只要接著整理即可。

今天也開始比較清楚地理解 Git 和 GitHub 的差別。Git 負責在本機記錄程式的變更,GitHub 則提供遠端儲存庫,讓我可以把這些程式與版本紀錄推送上去。檔案存在電腦裡、修改已經提交,以及提交已經上傳,是三個不同的狀態。

建立 aa-split 的 GitHub 儲存庫後,下一步是設定遠端網址。我用 git remote -v 檢查時,最初沒有看到任何輸出,表示這個專案還沒有保存遠端儲存庫的設定。

這個步驟比我想像中多花了一點時間。從聊天內容複製指令時,網址出現了 Markdown 連結的中括號、小括號,後來貼回聊天的內容又出現反斜線,讓我一度分不清楚,到底是設定錯誤,還是複製與顯示格式造成的問題。

最後直接檢查專案的設定,才確認實際的遠端網址已經正確。這次經驗提醒我,遇到指令問題時,不能只看轉貼後的文字,也要回到工具本身確認目前的狀態。反覆貼上相同內容,不一定能解決問題。

確認網址後,我執行 git push -u origin main,把本機的 main 分支推送到 GitHub。看到輸出出現「main -> main」,以及本機分支開始追蹤 origin/main 的訊息,才確定這次推送成功。

這裡的 -u 會建立本機分支與遠端分支之間的追蹤關係。設定完成後,之後在這個分支上推送修改,通常只需要輸入 git push,不必每次重新指定遠端與分支。

程式上傳後,我接著補了一份 README,說明這個專案要解決什麼問題、目前有哪些功能、如何開啟,以及各個檔案的用途。我也把目前的限制寫進去,例如帳目只保留在當前頁面,重新整理後會回到範例,還沒有資料庫、登入或實際付款功能。

第三天提到的現金面額輸入與找零建議,也放進後續規劃,而不是列在已完成功能裡。我希望這份說明能如實反映專案狀態,讓自己之後回來看,或其他人第一次打開儲存庫時,都能分清楚哪些已經能用、哪些還只是想法。

新增 README 的過程中,我又遇到一個小問題。我把 README.md 放進了 dist 資料夾,但在專案最外層執行的是 git add README.md,所以 Git 回報找不到這個檔案。

一開始看到錯誤訊息,我沒有立刻理解原因。接著執行提交時,Git 列出了尚未追蹤的 dist/README.md,這才看出檔案其實已經建立,只是位置和指令指定的路徑不同。

把 README 移到專案最外層後,我重新執行 git add README.md,再用 git commit -m "Add project README" 建立版本紀錄,最後執行 git push。這次成功產生新的提交,也順利推送到 GitHub。

這個過程讓我更清楚地理解三個步驟的關係:git add 是選取這次要納入紀錄的修改,git commit 是建立一筆本機版本紀錄,git push 才是把提交傳到遠端。前面沒有成功建立提交,後面就算一直執行 git push,也不會把尚未提交的檔案傳上去。

因此,先前看到的「Everything up-to-date」,並不是 README 已經上傳成功,而是當時沒有新的提交可以推送。理解這個差別後,終端機的訊息就不再只是成功或失敗,而是能用來判斷自己卡在哪個階段。

今天沒有增加新的分錢功能,但完成了 GitHub 連接、推送既有版本,以及新增並上傳 README。這些工作讓原型開始有比較清楚的管理方式,也為接下來在 VS Code 裡持續開發做好準備。

和 AI 一起做專案,除了請它產生程式,我也需要慢慢理解檔案位置、指令用途與版本狀態。遇到問題時,把錯誤訊息留下來,確認原因,再驗證修正結果,這些都是今天實際練習到的事情。

接下來會回到分錢系統本身,整理「建立帳本、加入成員、記錄支出、查看結算」的操作流程,也思考未來現金找零功能應該放在哪個位置。Day 5,就從先畫清楚流程,再決定畫面開始。


上一篇
Day 3|不只算誰欠誰:把分錢系統的需求說清楚
下一篇
Day 5|先想清楚怎麼用,再決定畫面怎麼做
系列文
《腦中的點子真的做得出來嗎?30 天 AI Vibe Coding 實驗》9
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言